<template>
	<view class="container">
		<view class="top">
			<!-- 店铺照片卡片 -->
			<uni-card margin="15rpx" class="map-card">
				<view class="map-container">
					<!-- 动态显示店铺图片 -->
					<image class="map" :src="selectedImage"></image>
				</view>
				<view class="store-title">
					<!-- 动态显示店铺名称 -->
					{{ selectedInfo.name }}
				</view>
				<view class="store-rating">
					<!-- 动态显示店铺评分 -->
					<uni-rate :value="selectedInfo.rate" max="5" size="28" color="#ffb400" readonly
						allow-half="false" />
					<text class="score">{{ selectedInfo.rate }}分</text>
				</view>
				<view class="store-detail-row">
					<view class="store-detail-col">
						<!-- 动态显示营业时间 -->
						<view>营业时间：{{ selectedInfo.startTime }}~{{ selectedInfo.endTime }}</view>
						<view>
							<!-- 动态显示店铺位置 -->
							位置：{{ selectedInfo.address }}
							<image class="nav-icon" src="/static/autoRepair/navigation.png" mode="aspectFit"
								@click="goToReserve"></image>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<!-- 服务项目卡片 -->
		<uni-card margin="15rpx" title="服务项目" style="margin-top: 390rpx;">
			<view v-for="service in storeInfoList" :key="service.id" class="service-row">
				<view class="service-name">{{ service.name }}</view>
				<view class="service-price">
					<text class="price">￥{{ service.presentPrice }}</text>
					<text class="origin-price">￥{{ service.originalPrice }}</text>
				</view>
			</view>
		</uni-card>

		<!-- 服务评价卡片 -->
		<uni-card margin="15rpx" title="服务评价">
			<view class="comment-list">
				<view v-for="comment in commentList" :key="comment.id" class="comment-item">
					<!-- 用户头像 -->
					<image class="avatar" :src="comment.imgs"></image>
					<view class="comment-content">
						<view class="comment-header">
							<!-- 用户姓名、评分、评论时间 -->
							<view class="comment-user">{{ comment.user }}</view>
							<uni-rate :value="comment.rate" max="5" size="24" color="#ffb400" readonly
								allow-half="false" />
							<view class="comment-date">{{ comment.time }}</view>
						</view>
						<!-- 评论内容 -->
						<view class="comment-text">{{ comment.content }}</view>
					</view>
				</view>
			</view>
		</uni-card>

		<!-- 底部按钮 -->
		<view class="bottom-btns">
			<button class="reserve-btn" @click="goToAppointment">
				立即预约
			</button>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import request from '@/untils/request.js';
import baseUrl from '@/untils//urlConfig.js';

const selectedInfo = ref(null);
const selectedImage = ref('');
//定义一个变量存储服务项目
const storeInfoList = ref([])
//定义一个变量存储服务评价
const commentList = ref([])
//定义一个用户信息列表
const userInfoList = ref([])

// 定义跳转方法
const goToAppointment = () => {
	uni.navigateTo({
		url: '/pages/autoRepair/appointment/appointment' // 请根据实际的页面路径修改
	});
};

onLoad((options) => {
	if (options.selectedInfo) {
		selectedInfo.value = JSON.parse(decodeURIComponent(options.selectedInfo));
	}
	if (options.selectedImage) {
		selectedImage.value = JSON.parse(decodeURIComponent(options.selectedImage));
	}
	request({
		url: `${baseUrl}/chy/servicedetails/list?mId=${selectedInfo.value.id}`,
		method: 'GET',
		success: (res) => {
			if (res.data.code === 200) {
				storeInfoList.value = res.data.rows;	
			}
			// console.log(storeInfoList.value)
		}	
	})
	request({
		url: `${baseUrl}/chy/evaluate/list?mid=${selectedInfo.value.id}`,
		method: 'GET',
		success: (res) => {
			if (res.data.code === 200) {
				// console.log(res.data.rows)
				commentList.value = res.data.rows;
			}
			// console.log(commentList.value)
		}
	})
});
</script>

<style>
.container {
	background: #fff;
	min-height: 100vh;
	padding-bottom: 80rpx;
}

.top {
	margin-top: -15rpx;
	padding-top: 20rpx;
	height: 300rpx;
	background-color: #3083fb;
}

.map-container {
	position: relative;
	height: 400rpx;
	border-radius: 20rpx;
	overflow: hidden;
}

.map-card {
	border-radius: 20rpx !important;
	overflow: hidden;
}

.map {
	width: 100%;
	height: 100%;
}

.map-btn {
	position: absolute;
	top: 20rpx;
	left: 50%;
	transform: translateX(-50%);
	background: #ff7f2a;
	color: #fff;
	padding: 8rpx 24rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	z-index: 2;
}

.store-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 12rpx;
	margin-top: 40rpx;
}

.store-rating {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}

.star {
	color: #ffb400;
	font-size: 28rpx;
	margin-right: 12rpx;
}

.score {
	color: #666;
	font-size: 24rpx;
	margin-right: 12rpx;
}

.distance {
	font-size: 24rpx;
}

.store-detail {
	color: #888;
	font-size: 24rpx;
	margin-bottom: 12rpx;
}

.store-img {
	width: 180rpx;
	height: 120rpx;
	border-radius: 12rpx;
	margin-left: 24rpx;
	object-fit: cover;
}

.store-detail-row {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}

.store-detail-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.info-card {
	margin-top: 600rpx;
	border-radius: 20rpx !important;
	margin-top: 20rpx;
	overflow: hidden;
}

.service-list {
	display: flex;
	flex-wrap: wrap;
	gap: 24rpx;
}

.service-item {
	background: #f5f7fa;
	border-radius: 12rpx;
	padding: 18rpx 36rpx;
	font-size: 28rpx;
	color: #333;
}

.nav-icon {
	width: 32rpx;
	height: 32rpx;
	margin-left: 8rpx;
	vertical-align: middle;
}

.comment-list {
	display: flex;
	flex-direction: column;
	gap: 32rpx;
}

.comment-item {
	background: #f8f8f8;
	border-radius: 12rpx;
	padding: 18rpx 24rpx;
}

.comment-user {
	font-weight: bold;
	margin-bottom: 8rpx;
}

.comment-text {
	color: #666;
	margin-top: 8rpx;
}

.bottom-btns {
	width: 100%;
	margin-top: 40rpx;
	display: flex;
	background: #fff;
	justify-content: center;
}

.reserve-btn {
	flex: 1;
	margin: 0 32rpx;
	background: #3083fb;
	color: #fff;
	border-radius: 40rpx;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 12rpx;
	vertical-align: middle;
}

.service-title {
	font-size: 30rpx;
	font-weight: bold;
	margin-left: 32rpx;
	margin-bottom: 16rpx;
}

.service-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 32rpx;
	height: 60rpx;
}

.service-name {
	font-size: 28rpx;
	color: #333;
}

.service-price {
	display: flex;
	align-items: baseline;
}

.price {
	color: #ff4d4f;
	font-size: 30rpx;
	margin-right: 8rpx;
}

.origin-price {
	color: #bbb;
	font-size: 24rpx;
	text-decoration: line-through;
}

.divider {
	height: 1rpx;
	background: #f0f0f0;
	margin: 0 32rpx;
}

.comment-title {
	font-size: 30rpx;
	font-weight: bold;
	margin-left: 32rpx;
	margin-bottom: 16rpx;
}

.comment-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
	padding-bottom: 24rpx;
}

.comment-item {
	display: flex;
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.03);
	padding: 24rpx 24rpx 16rpx 24rpx;
	align-items: flex-start;
}

.avatar {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.comment-content {
	flex: 1;
}

.comment-header {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}

.comment-user {
	font-weight: bold;
	font-size: 26rpx;
	margin-right: 12rpx;
}

.comment-date {
	margin-left: auto;
	color: #bbb;
	font-size: 22rpx;
}

.comment-text {
	color: #666;
	font-size: 26rpx;
	line-height: 1.6;
}
</style>